<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        />
        <title>QilinUtils</title>
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.6/vconsole.min.js"></script>
        <script>
            new VConsole()
        </script> -->
        <style>
            .ellipsis{
                /* display:inline-block; */
                width:100%;
                overflow:hidden;
                /* white-space:nowrap;
                text-overflow:ellipsis; */
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:3;
                line-clamp:3;
            }
        </style>
    </head>
    <body>
        <div
            id="app"
            style="
                height: 298.4px;
                padding: 20px;
                border: 1px solid #f30;
                overflow: auto;
                box-sizing: border-box;
            "
        >
            <!-- <div style="height: 1000px"></div> -->
            <div class="text-container" style="width:300px;border:1px solid #ccc;padding:2px 5px;box-sizing: border-box;">
                <!-- <span class="ellipsis cell">朝圣者，虔诚而真挚，自海的那一端而来，一步一叩首，只为觐见本座，你为何带着杀意而至？遇帝不拜，真命已失，轮回碑上有汝名；一步一叩首，往生路上罪削半，护你真灵；纵横古今，天上地下无敌，渴求一败而不能；这时你出现了，但也终究只是一个献祭者，违背帝之法旨，吾亲手镇杀之！</span> -->
                <!-- <span class="ellipsis cell">朝圣者，虔诚而真挚，自海的那一端而来，</span> -->
                <span class="ellipsis cell">朝圣者，虔诚而真挚，自海的那一端而来，一步一叩首，只为觐见本座，你为何带着杀意而至？遇帝不拜，真命已失，轮回</span>
            </div>
        </div>
    </body>
    <!-- 线上版 -->
    <script
        src="../dist/qilin-utils.js"
        type="text/javascript"
        charset="utf-8"
    ></script>
    <script type="text/javascript">
        // console.log(Qilin);
        // console.log(Qilin.Platform.getOperatingSystem());
        // console.log(Qilin.Element.getNodeWidth(document.getElementById("app")));
        // console.log(Qilin.Element.getNodeContentWidth(document.getElementById("app")));

        /**
         * 判断是否超出省略号
         */
        //  const getPadding  = (el)=>{
        //     const style = window.getComputedStyle(el,null);
        //     const paddingLeft = Number.parseInt(style.paddingLeft,10) || 0;
        //     const paddingRight = Number.parseInt(style.paddingRight,10) || 0;
        //     const paddingTop = Number.parseInt(style.paddingTop,10) || 0;
        //     const paddingBottom = Number.parseInt(style.paddingBottom,10) || 0;
        //     console.log(paddingLeft,paddingRight,paddingBottom,paddingTop);
        //     return {
        //         left:paddingLeft,
        //         right:paddingRight,
        //         top1:paddingTop,
        //         bottom:paddingBottom
        //     };
        // };

        // const cellChild = document.querySelector(".cell");
        // const range = document.createRange();
        // range.setStart(cellChild,0);
        // range.setEnd(cellChild,cellChild.childNodes.length);
        // let rangeWidth = range.getBoundingClientRect().width;
        // let rangeHeight = range.getBoundingClientRect().height;
        // console.log(rangeWidth,rangeHeight,range,range.getBoundingClientRect());
        // const offsetWidth = rangeWidth - Math.floor(rangeWidth);
        // if(offsetWidth < 0.001){
        //     rangeWidth = Math.floor(rangeWidth);
        // }
        // const offsetHeight = rangeHeight - Math.floor(rangeHeight);
        // if(offsetHeight < 0.001){
        //     rangeHeight = Math.floor(rangeHeight);
        // }
        // const {top1,left,right,bottom} = getPadding(cellChild);
        // // console.log(top,top1);
        // const horizontalPadding = left + right;
        // const verticalPadding = top1 + bottom;
        // console.log(horizontalPadding,verticalPadding);
        // console.log(cellChild.offsetWidth,cellChild.offsetHeight);
        // console.log(cellChild.clientWidth,cellChild.clientHeight);
        // console.log(cellChild.scrollWidth,cellChild.scrollHeight);
        // console.log(cellChild.getBoundingClientRect().width,cellChild.getBoundingClientRect().height);
        // if(rangeWidth + horizontalPadding > cellChild.offsetWidth ||
        //     rangeHeight + verticalPadding > cellChild.offsetHeight ||
        //     cellChild.scrollWidth > cellChild.offsetWidth
        // ){
        //     console.log("有省略号");
        // }else{
        //     console.log("无省略号");
        // }
        console.log(Qilin.Common.judgeEllipsisText(".cell"));
        
    </script>
</html>
